<script setup lang="ts">
// import DiyTabsMd from '@/views/diy/chat/components/DiyTabsMd.vue'
import { onMounted } from 'vue';
import { ref, watch } from 'vue'

const props = withDefaults(
  defineProps<{
    data: any
    loading?: boolean
    resultContent?: any
    isError?: boolean
    isErrorType?: number
  }>(),
  {
    data: [],
    loading: false,
    isError: false,
    resultContent: {},
    isErrorType: 1
  }
)
const emits = defineEmits(['timerIdChange', 'onRetry']);
const maxTotalTime = 5; // 最大总时长，以秒为单位
let totalTime = 0; // 总时长，以秒为单位
const timerId:any = ref(undefined); // 定时器ID
// ts-ignore
const maxNumber: number = 31
const current: any = ref([])

// 生成指定数量的随机数，范围在0-40之间
function generateRandomNumbers(count: number) {
  const numbers: any = [];
  for (let i = 0; i < count; i++) {
    numbers.push(Math.floor(Math.random() * maxNumber + 1));
  }
  const tempNum = [...new Set([...current.value, ...numbers])]; 
  current.value = tempNum;
}
function getRandomInterval() {
  return Math.floor(Math.random() * 6) + 3;
}

// 启动生成数字的定时器
function startGeneratingNumbers() {
  timerId.value = setInterval(() => {
    /** 每次生成10-20个id */
    const count = Math.floor(Math.random() * 30) + 10
    generateRandomNumbers(count);

    // 更新总时长
    totalTime += getRandomInterval();

    // 如果总时长超过70秒，停止定时器
    if (totalTime >= maxTotalTime && current.value.length >= (maxNumber - 1)) {
      clearInterval(timerId.value!);
      timerId.value = undefined;
    }
    /** 间隔3-6秒生成一次 */
  }, getRandomInterval() * 100); // 转换为毫秒
}


function handelOnRetry() {
  emits('onRetry');
}

if(!props.isError) {
  startGeneratingNumbers()
}

watch(() => timerId, () => {
  emits('timerIdChange', 3); // 触发事件
}, { deep: true })

watch(() => props.loading, (val) => {
  if (!val) {
    clearInterval(timerId.value)
    timerId.value = undefined;
    setTimeout(() => {
      emits('timerIdChange', 4); // 触发事件
    }, 0);
  }
}, { deep: true })

onMounted(() => {
  
})

</script>

<template>
  <div class="step-loading">
    <div class="step-loading-card">
      <div v-if="props.isError">
        <PageEmpty v-if="props.isErrorType === 1" type="3"  text1=" " text2="加载超时， " retry="点击重试" @onRetry="handelOnRetry"/>
        <PageEmpty v-if="props.isErrorType === 2" type="3" text1=" " text2="文件过大导致模型上下文超限 "/>
      </div>
      <div v-else>
        <!---loading-1-->
        <el-steps v-if="timerId" direction="vertical">
          <el-step v-for="(item, index) in props.data" :key="index" :title="item.title" >
            <template #icon>
              <img src="@/assets/agent/chat/check.svg" alt="">
            </template>
            <template #title>
              <span class="is-process">{{ item.title }}</span>
            </template>
            <template #description>
              <div v-for="(v, i) in item.children" :key="index + '_' + i" :class="['item-box',current.includes(v.id) && 'item-box-checked']">
                <img v-if="current.includes(v.id)" src="@/assets/diy/checked1.svg" alt="" style="width: 12px; height: 12px;position: relative; top: 2px; margin-right: 3px;">
                <img v-else class="loading-img" src="@/assets/agent/chat/loading-s.svg" alt="" style="width: 12px; height: 12px; top: 2px; margin-right: 3px;">
                {{ v.title }}
              </div>
            </template>
          </el-step>
        </el-steps>
        <!---loading-2-->
        <div 
          v-else-if="!timerId" 
          v-loading="!timerId" 
          element-loading-text="正在获取审查结果..."
          style="height: calc(100vh - 260px);width: 100%;"
        >
        </div>
      </div>
       <!---展示结果-->
       <!-- <DiyTabsMd v-else :resultContent="resultContent" /> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-step__line) {
  border-left: 2px dashed #DFE0E3;
  background-color: transparent;
  top: 5px !important;
}
:deep(.el-step__title.is-wait)  {
  color: var(--el-text-color-primary);
  font-weight: bold;
}
:deep(.el-step__description.is-process) {
  color: var(--el-text-color-placeholder);;
}

:deep(.el-step__description .item-box:last-child){
  margin-bottom: 28px;
}
.step-loading {
  box-sizing: border-box;
  padding: 20px 30px;
  flex-direction: row;
  overflow-y: auto;
  background-color: #fff;
  .step-loading-card {
    min-height: 400px;
    width: 100%;
    .md-editor {
      border-radius: 6px;
      padding: 16px;
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .loading-img {
      animation: rotate 2s linear infinite;
      width: 16px;height: 16px;position: relative; top: 4px;
    }
  }
}
.item-box{
  margin-bottom: 6px;
  color: #8C8C8C !important;
}
.item-box.item-box-checked{
  color: #3067EF !important;
}
</style>
